<template>
  <div class="interaction-start">
    <crumb />
    <div class="container">
      <div class="box-left">
        <div class="section">
          <div class="title">
            {{overData.resourceCaseName}}
          </div>
          <div class="content">
            {{overData.caseRequest}}
          </div>
        </div>
        <div class="section">
          <div class="card">
            <div class="row row-1">
              <div class="name">
                <img :src="overData.headImgUrl" alt="">{{overData.name}}
              </div>
              <div class="time">
                {{overData.updateTime}}
              </div>
            </div>
            <div class="row row-2">
              <div class="score">实训成绩：{{overData.maxScore}}分</div>
              <div class="rank">实训排名：{{overData.rank}}名</div>
            </div>
          </div>
          <div class="list-box">
            <ul>
              <li v-for="(item, index) in overData.nodes" :key="index" @click="showInfo(item.caseNodeId, item.sortIndex)">{{item.caseNodeName}}<span class="right-arrow">点击查看></span></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="box-right">
        <div class="section">
          <div class="title">
            查看内容
          </div>
          <ul class="report-box">
            <li>
              报告文件<span class="right-arrow">案例分析文件.doc</span>
            </li>
            <li class="active" @click="nextFunc(1)">
              所在小组得分<span class="right-arrow">{{historyData.score}}分></span>
            </li>
            <li class="active" @click="nextFunc(2)">
              查看其他组的打分<span class="right-arrow">></span>
            </li>
            <li>
              <div>答题内容</div>
              <textarea disabled name="fill" v-model="answerContent" cols="30" rows="10">fsdfsdf</textarea>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { report, historyNode } from '@/api/student/training/interaction'
export default {
  name: 'interaction-start',
  data () {
    return {
      overData: '',
      historyData: '',
      answerContent: '' // 答题内容
    }
  },
  components: {
  },
  async mounted () {
    await this.report()
    this.historyNode(this.overData.nodes[0].caseNodeId, this.overData.nodes[0].sortIndex)
  },
  methods: {
    async report () {
      const res = await report(
        {
          lessonICaseId: this.$route.query.lessonICaseId, // 课程案例id
          resourceCaseId: this.$route.query.resourceCaseId // 互动课程id
        }
      )
      console.log('==>已完成', res)
      if (res.code === '200') {
        this.overData = res.data
      } else {
        this.$message.error(res.message)
      }
    },
    async historyNode (caseNodeId) {
      const res = await historyNode(
        {
          lessonICaseId: this.overData.lessonICaseId, // 课程案例id
          caseNodeId: caseNodeId // 节点id
        }
      )
      console.log('==>查看', res)
      if (res.code === '200') {
        this.historyData = res.data
        this.answerContent = ''
        this.answerContent = JSON.parse(res.data.result).answer
      } else {
        this.$message.error(res.message)
      }
    },
    showInfo (caseNodeId, sortIndex) {
      if (sortIndex === -2) {
        this.$router.push( // 个人评分
          {
            path: 'interactionDetails',
            query: {
              type: 'person',
              lessonICaseId: this.historyData.lessonICaseId // 课程案例id
            }
          }
        )
      } else {
        this.historyNode(caseNodeId)
      }
    },
    nextFunc (type) {
      if (type === 1) {
        this.$router.push( // 本组得分
          {
            path: 'interactionDetails',
            query: {
              type: 'my',
              lessonICaseId: this.historyData.lessonICaseId, // 课程案例id
              caseNodeId: this.historyData.caseNodeId, // 节点id
              groupId: this.historyData.groupId // 我的学生小组id
            }
          }
        )
      } else {
        this.$router.push( // 查看其他组的打分
          {
            path: 'interactionDetails',
            query: {
              type: 'ta',
              lessonICaseId: this.historyData.lessonICaseId, // 课程案例id
              caseNodeId: this.historyData.caseNodeId, // 节点id
              groupId: this.historyData.groupId // 我的学生小组id
            }
          }
        )
      }
    }
  }
}
</script>
<style scoped lang="scss" rel="stylesheet/scss">
.interaction-start {
  .container {
    display: flex;
    justify-content: space-between;
    .box-left {
      width: 630px;
      background: #fff;
      padding: 15px;
      .section {
        .title {
          font-size: 14px;
          font-weight: bold;
          position: relative;
          .sm-group, .arrow {
            position: absolute;
            right: 0;
            top: 0;
            font-size: 12px;
            font-weight: initial;
            color: #828282;
          }
        }
        .content {
          color: #BBBBBB;
          font-size: 14px;
          padding: 20px 0;
          line-height: 1.2;
        }
        .card {
          border-radius: 20px;
          background: #f5f5f5;
          width: 455px;
          margin: 0 auto;
          .row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .name {
              img {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                vertical-align: middle;
                margin-right: 15px;
              }
            }
          }
          .row-1{
            padding: 0 20px;
            line-height: 60px;
            border-bottom: 1px solid #D2D2D2;
          }
          .row-2{
            padding: 0 60px;
            line-height: 50px;
          }
        }
        .list-box {
          margin-top: 20px;
          ul {
            li {
              line-height: 60px;
              font-size: 14px;
              border-bottom: 1px solid #f5f5f5;
              padding: 0 10px;
              position: relative;
              cursor: pointer;
              &:hover {
                background: #f5f5f5;
              }
              .right-arrow {
                position: absolute;
                right: 10px;
              }
            }
          }
        }
      }
    }
    .box-right {
      width: 550px;
      min-height: 100%;
      background: #fff;
      padding: 15px;
      box-sizing: border-box;
      .title {
        font-size: 14px;
        font-weight: bold;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .content {
        color:#BBBBBB;
        font-size: 14px;
        line-height: 1.2;
      }
      .report-box {
        li {
          line-height: 70px;
          position: relative;
          .right-arrow {
            position: absolute;
            right: 0;
          }
          textarea {
            width: 100%;
            margin-top: 20px;
          }
        }
        .active:hover {
          background: #f5f5f5;
        }
      }
    }
  }
}

</style>
